<template>
    <div :class="{ rightContent: true, margin: show }">
        <div class="top">
            <div class="btn" @click="showAndHidden">
                <i v-if="show" class="el-icon-s-fold"></i>
                <i v-else class="el-icon-s-unfold"></i>
            </div>
            <div class="table">
                <el-breadcrumb class="tablezi">
                    <el-breadcrumb-item :to="{ path: '/sfzy' }">十方智育</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ table.firstTable }}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ table.secondTable }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <div class="my">
                <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">
                <i class="el-icon-arrow-down"></i>
            </div>


        </div>
        <div class="bottom">
            <router-view></router-view>
        </div>
    </div>

</template>

<script>
export default {
    name: "RightContentView",
    data() {
        return {
            show: false,
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        }
    },
    props: ["table"],
    methods: {
        showAndHidden() {
            this.show = !this.show;
            this.$emit("menuChange", this.show);
        }
    },
}


</script>

<style scoped>
.top {
    display: flex;
    height: 60px;
    width: 100%;
    border-bottom: 2px solid #e0e3ea;
}

.btn i {
    line-height: 60px;
    font-size: 30px
}

.table {
    padding-left: 20px;
    width: 92%;
}
.tablezi{
    line-height: 60px;
}

.margin {
    margin-left: 65px !important;
}

.my{
    justify-content: flex-end;
    line-height: 60px;
    display: flex;
}
.my img{
    margin-top: 5px;
    width: 50px;
    height: 50px;
}
.my i{
    margin-top: 40px;

}

.rightContent {
    box-sizing: border-box;
    padding-left: 15px;
    background-color: white;
    height: 100%;
    margin-left: 230px;
    transition: margin-left 0.5s;
}

@media only screen and (max-width:1000px) {

    /* 页面宽度在1000以内 才会执行此处代码 */
    /* max-width:1000px 最大能监听到1000px的宽度 */
    .rightContent {
        margin-left: 0px
    }
}
</style>